<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			html body {
				height: 100%;
			}
			
			li {
				list-style-type: none;
			}
			
			#big {
				min-width: 500px;
				margin: 0px auto;
				border-top: 1px solid #C40F6C;
			}
			
			#top {
				position: fixed;
				min-width: 500px;
				height: 60px;
				background-color: #C40F6C;
				text-align: center;
				width: 100%;
				z-index: 100;
			}
			
			#top img {
				margin-top: 7px;
			}
			
			#nav {
				position: fixed;
				background-color: white;
				min-width: 500px;
				margin-top: 60px;
				width: 100%;
				height: 50px;
				border-bottom: 1px solid #E0E0E0;
				margin-bottom: 5px;
				z-index: 100;
			}
			
			#nav ul {
				margin: 0px 10px;
			}
			
			#nav li {
				float: left;
				width: 25%;
				line-height: 50px;
				text-align: center;
				font-size: 18px;
				font-family: "微软雅黑";
				cursor: pointer;
			}
			
			#mid {
				margin-top: 120px;
				margin-bottom: 120px;
			}
			
			.clas1 {
				color: #C40F6C;
				border-bottom: 2px solid #C40F6C;
			}
			
			#ul1 li {
				height: 80px;
				line-height: 80px;
				border-bottom: 1px solid #EAEAEA;
				position: relative;
			}
			
			#ul1 img {
				float: right;
				margin-right: 40px;
				margin-top: 20px;
			}
			
			.sp1 {
				display: inline-block;
				margin-left: 10px;
				height: 80px;
				width: 150px;
				border-bottom: 2px solid #C40F6C;
			}
			
			.sp2 {
				display: inline-block;
				margin-left: 10px;
				height: 80px;
				width: 150px;
			}
			
			#ul1 label {
				font-size: 60px;
				font-style: oblique;
			}
			
			.lab1 {
				color: #C40F6C;
			}
			
			.lab2 {
				color: #9A9A9A;
			}
			
			#ul1 li {
				position: relative;
			}
			
			#ul1 .sp1-1 {
				position: absolute;
				font-size: 30px;
				font-family: "微软雅黑";
				top: -10px;
				left: 90px;
				color: #333333;
			}
			
			#ul1 .sp1-2 {
				color: #333333;
				position: absolute;
				font-size: 14px;
				font-weight: bold;
				font-family: "微软雅黑";
				top: 20px;
				left: 90px;
			}
			
			.mid-div1 {
				display: none;
			}
			
			#foot {
				height: 70px;
				background-color: #0E0E0E;
				/*position: relative;*/
				min-width: 500px;
				position: fixed;
				bottom: 0px;
				z-index: 200;
				width: 100%;
			}
			
			#foot-1 {
				position: absolute;
				top: 10px;
				left: 10px;
				width: 50px;
				height: 50px;
				overflow: hidden;
			}
			
			#fimg1 {
				width: 50px;
			}
			
			#jindu {
				cursor: pointer;
				height: 5px;
				border-radius: 2px;
				background-color: white;
				position: absolute;
				top: 33px;
				left: 200px;
				/*float: left;*/
				width: 250px;
				/*margin-top: -40px;*/
				/*margin-right: 50px;*/
				/*margin-left: 210px;*/
				/*position: absolute;*/
			}
			
			#fimg2 {
				position: absolute;
				top: 20px;
				left: 70px;
			}
			
			#fimg3 {
				position: absolute;
				top: 18px;
				left: 110px;
			}
			
			#fimg4 {
				position: absolute;
				top: 20px;
				left: 155px;
			}
			
			#gdt {
				width: 5px;
				height: 5px;
				background-color: #C40F6C;
			}
			
			#fen {
				color: white;
			}
			
			#miao {
				color: white;
			}
			
			#sy {
				width: 50px;
				height: 50px;
				background-color: red;
				position: absolute;
				top: 0px;
				right: 0px;
			}
			
			#fm {
				width: 100px;
				height: 20px;
				position: absolute;
				font-family: "微软雅黑";
				font-size: 14px;
				color: white;
				top: 45px;
				left: 210px;
			}
			
			.mid2-li {
				height: 100px;
				line-height: 100px;
				overflow: hidden;
				position: relative;
				border-bottom: 8px solid #E5E5E5;
			}
			
			.mid2-img1 {
				width: 150px;
				opacity: 0.7;
			}
			
			.mid2-s1 {
				font-size: 40px;
				color: white;
				position: absolute;
				top: 0px;
				left: 27px;
				font-weight: bold;
			}
			
			.mid2-img2 {
				float: right;
				width: 20px;
				margin-top: 35px;
				margin-right: 20px;
			}
			
			.mid2-img3 {
				height: 100px;
				width: 150px;
				background-color: #000000;
				position: absolute;
				left: 0px;
				top: 0px;
			}
			
			.mid2-img4 {
				position: absolute;
				left: 50px;
				top: 0px;
			}
			
			.mid2-s2 {
				font-size: 18px;
				font-family: "微软雅黑";
			}
			
			.mid2-s3 {
				font-size: 14px;
				font-family: "微软雅黑";
				color: #7B818F;
			}
			
			.mid2-p1 {
				position: absolute;
				top: 0px;
				left: 200px;
				line-height: 30px;
				height: 30px;
			}
			
			.mid2-p2 {
				position: absolute;
				top: 33px;
				left: 200px;
				line-height: 30px;
				height: 30px;
			}
			
			.mid2-p3 {
				position: absolute;
				top: 66px;
				left: 200px;
				line-height: 30px;
				height: 30px;
			}
			
			.mid2-s4 {
				position: absolute;
				bottom: 0px;
				left: 0px;
				color: white;
				font-size: 14px;
				line-height: 20px;
			}
			
			#mid3 img {
				box-sizing: border-box;
				width: 50%;
				border: 10px solid white;
				/*min-width: 00px;*/
				max-width: 800px;
				margin: 0px auto;
				float: left;
			}
			
			#sy1 {
				width: 50px;
				height: 50px;
				float: right;
				margin-top: 20px;
				line-height: 50px;
			}
			
			#sy2 {
				width: 100%;
				height: 60px;
				position: absolute;
				right: 0px;
				top: -60px;
				background-color: #9C9C9C;
			}
			
			#sy2-1 {
				width: 500px;
				height: 5px;
				margin: 30px auto;
				background-color: white;
			}
			
			#sy2-1 span {
				position: absolute;
				left: 50%;
				bottom: 35px;
				font-size: 18px;
				color: white;
			}
			
			#sy2-2 {
				height: 5px;
				width: 10px;
				background-color: #C40F6C;
			}
			
			.show {
				display: none;
			}
			
			#add {
				position: absolute;
				font-size: 20px;
				color: white;
				width: 100%;
				height: 60px;
				line-height: 60px;
				text-align: center;
				border-bottom: 1px solid white;
				position: absolute;
				right: 0px;
				top: -60px;
				background-color: #9C9C9C;
			}
			
			#inp {
				display: none;
			}
		</style>
		<script src="js/addclass.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/MusicItem.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>
		<div id="big">
			<input type="file" id="inp" value="文件读取" onchange="addyinyue(this)" />
			<audio oncanplay="canp()" ontimeupdate="gaibian()" id="aud" src="MP3/yanyuan.mp3"></audio>
			<div id="top">
				<img src="img/logo.c5b3d690.png" />
			</div>
			<div id="nav">
				<ul>
					<li class="clas1">本地</li>
					<li>榜单</li>
					<li>歌单</li>
					<li>MV</li>
				</ul>
			</div>
			<div id="mid">
				<div id="mid1">
					<ul id="ul1">
						<!--<li>
							<div class="sp1">
								<label class="lab1">1</label>
							</div>
							<span class="sp1-1">
										成都
									</span>
								<span class="sp1-2">
										赵磊
									</span>
							<img  src="img/001.png"/>
						</li>-->
					</ul>
				</div>
				<div id="mid2" class="mid-div1">
					<ul id="mid2-ul">
						<li class="mid2-li">
							<img src="" class="mid2-img3" />
							<img class="mid2-img1" src="img/ebd2d209b3de9c8272b649db6881800a18d84319.jpg" />
							<span class="mid2-s1">内地</span>
							<span class="mid2-s4">1957.1万</span>
							<p class="mid2-p1"><span class="mid2-s2"></span><span class="mid2-s3">- 薛之谦</span></p>
							<p class="mid2-p2"><span class="mid2-s2"></span><span class="mid2-s3">- 薛之谦</span></p>
							<p class="mid2-p3"><span class="mid2-s2"></span><span class="mid2-s3">- 薛之谦</span></p>
							<img class="mid2-img2" src="img/2017-02-19_202246.png" />
						</li>
						<li class="mid2-li">
							<img src="" class="mid2-img3" />
							<img class="mid2-img1" src="img/b5356f81800a19d8ec4a6e9c31fa828ba71e466c.jpg" />
							<span class="mid2-s1">港台</span>
							<span class="mid2-s4">857.5万</span>
							<p class="mid2-p1"><span class="mid2-s2"></span><span class="mid2-s3">- 薛之谦</span></p>
							<p class="mid2-p2"><span class="mid2-s2"></span><span class="mid2-s3">- 薛之谦</span></p>
							<p class="mid2-p3"><span class="mid2-s2"></span><span class="mid2-s3">- 薛之谦</span></p>
							<img class="mid2-img2" src="img/2017-02-19_202246.png" />

						</li>
						<li class="mid2-li">
							<img src="" class="mid2-img3" />
							<img class="mid2-img1" src="img/cecf40a98226cffcbbf5542bbb014a90f403ead3.jpg" />
							<span class="mid2-s1">欧美</span>
							<span class="mid2-s4">1582.9万</span>
							<p class="mid2-p1"><span class="mid2-s2"> </span><span class="mid2-s3">- 薛之谦</span></p>
							<p class="mid2-p2"><span class="mid2-s2"></span><span class="mid2-s3">- 薛之谦</span></p>
							<p class="mid2-p3"><span class="mid2-s2"></span><span class="mid2-s3">- 薛之谦</span></p>
							<img class="mid2-img2" src="img/2017-02-19_202246.png" />

						</li>
						<li class="mid2-li">
							<img src="" class="mid2-img3" />
							<img class="mid2-img1" src="img/f8413adbb6fd526651f5d78da918972bd60736d3.jpg" />
							<span class="mid2-s1">韩国</span>
							<span class="mid2-s4">966.3万</span>
							<p class="mid2-p1"><span class="mid2-s2">1 演员 </span><span class="mid2-s3">- 薛之谦</span></p>
							<p class="mid2-p2"><span class="mid2-s2">1 演员</span><span class="mid2-s3">- 薛之谦</span></p>
							<p class="mid2-p3"><span class="mid2-s2">1 演员</span><span class="mid2-s3">- 薛之谦</span></p>
							<img class="mid2-img2" src="img/2017-02-19_202246.png" />
						</li>
					</ul>
				</div>
				<div id="mid3" class="mid-div1">
					<ul>
						<li>
							<img src="img/229627a3522943e0b6dbbce6d4442c7f20160729112431.jpg" />
							<img src="img/5dc3f81304a141388a31c3ba3d8f606e20160623160715.jpg" />
							<img src="img/894c715a952c42febc62d2ce2524d79620160719161618.jpg" />
							<img src="img/229627a3522943e0b6dbbce6d4442c7f20160729112431.jpg" />
						</li>
					</ul>
				</div>
				<div class="mid-div1" id="mid4">
					4
				</div>
			</div>

			<div id="foot">
				<div id="foot-1">
					<img id="fimg1" src="img/ebd2d209b3de9c8272b649db6881800a18d84319.jpg" />
				</div>
				<img id="fimg2" onclick="upge()" src="img/2017-02-15_215734.png" />
				<img id="fimg3" src="img/2017-02-15_215501.png" />
				<img id="fimg4" onclick="onge()" src="img/2017-02-15_215721.png" />
				<div onclick="tuodong(event)" id="jindu">
					<div id="gdt">

					</div>
				</div>
				<div id="fm">
					<span id="fen">0:00</span> /
					<span id="miao">0:00</span>
				</div>
				<div onclick="xianshisy()" id="sy1">
					<img src="img/2017-02-20_130010.png" />
				</div>
				<div class="show" id="sy2">
					<div onclick="shengyin(event)" id="sy2-1">
						<span>音</span>
						<div id="sy2-2">
						</div>
					</div>
					<div id="add" onclick="add()">
						添加本地音乐
					</div>
				</div>

			</div>
		</div>
		<script type="text/javascript">
			var a = 0 //开始还是暂停
			var xh = 0;
			var xunhuan = 0;
			var aud = document.getElementById("aud");
			var sp1 = document.getElementById("fen");
			var sp2 = document.getElementById("miao");
			var ol = document.getElementById("ul1").children;
			var lia = document.getElementById("nav").children[0].children;
			var diva = document.getElementById("mid").children
			var xx = Music.items;
			var tx = document.getElementById("fimg1");
			//显示声音
			var xssy = document.getElementById("sy2")

			function xianshisy() {
				if(xssy.className == "") {
					xssy.className = "show"
				} else {
					xssy.className = ""
				}
			}
			//声音
			var sy2 = document.getElementById("sy2-2")
			sy2.style.width = aud.volume * 500 + "px";

			function shengyin(event) {
				sy2.style.width = event.offsetX + "px";
				aud.volume = event.offsetX / 500;
			}
			//滚动条开始
			var gdt1 = document.getElementById("gdt");

			function gaibian() {
				gdt1.style.width = aud.currentTime / aud.duration * 250 + "px"
				fen();
			}
			//分与秒
			function fen() {
				var sj = parseInt(aud.currentTime % 60)
				if(sj <= 9) {
					sj = "0" + sj;
				}
				sp1.innerHTML = parseInt(aud.currentTime / 60) + ":" + sj
			}
			//总时间长
			function canp() {
				var s = parseInt(aud.duration / 60)
				var f = parseInt(aud.duration % 60)
				sp2.innerHTML = s + ":" + f
			}
			//添加音乐
			function add() {
				document.getElementById("inp").click();
			}

			function addyinyue(t) {
				if(window.FileReader) {
					var file = new FileReader();
					file.onload = function(e) {
						xx.unshift({
							"title": "你猜",
							"img": "img/cecf40a98226cffcbbf5542bbb014a90f403ead3.jpg",
							"author": "爱猜不猜",
							"url": "'" + e.target.result + "'"
						})
						aud.src = e.target.result
					}
					file.readAsDataURL(t.files[0]);
				}
				setTimeout("tuijian()", 500);
				setTimeout("lidianji()", 500)
				xssy.className = "show"
			}
			//开始按钮
			function kaishi2() {
				aud.src = ol[xh].getAttribute("data-url");
				kaishi();
			}

			function kaishi() {
				if(a == 0) {
					aud.play();
					fimg3.src = "img/2017-02-15_215703.png";
					ol[xh].children[3].src = "img/2017-02-16_132445.png"
					a = 1;
				} else {
					a = 0;
					fimg3.src = "img/2017-02-15_215501.png"
					ol[xh].children[3].src = "img/2017-02-16_132006.png"
					aud.pause()
				}
				tx.src = xx[xh].img;
			}
			//拖动进度条
			function tuodong(event) {
				gdt1.style.width = 50 + "px"
				gdt1.style.width = event.offsetX + "px";
				aud.currentTime = event.offsetX / 250 * aud.duration
			}

			//上一首
			function upge() {
				a = 0;
				ol[xh].children[3].src = "img/2017-02-16_132006.png"
				if(xh > 0) {
					xh--;
				} else {
					xh = ol.length - 1;
				}
				kaishi2();
			}
			//下一首
			function onge() {
				a = 0;
				ol[xh].children[3].src = "img/2017-02-16_132006.png"
				if(xh < ol.length - 1) {
					xh++;
				} else {
					xh = 0;
				}
				kaishi2();
			}
			//推荐信息初始化-开始
			var mida = document.getElementById("ul1");

			function tuijian() {
				mida.innerHTML = ""
				for(var i = 0; i < xx.length; i++) {
					var nli = document.createElement("li")
					nli.setAttribute("data-url", xx[i].url)
					var ndiv = document.createElement("div")
					var nla = document.createElement("label")
					nla.innerHTML = i + 1;
					var nspa = document.createElement("span")
					nspa.innerHTML = xx[i].title;
					nspa.className = "sp1-1"
					var nspb = document.createElement("span")
					nspb.innerHTML = xx[i].author;
					nspb.className = "sp1-2"
					var img = document.createElement("img")
					img.src = "img/2017-02-16_132006.png";
					if(i > 2) {
						nla.className = "lab2";
						ndiv.className = "sp2";
					} else {
						nla.className = "lab1"
						ndiv.className = "sp1";
					}
					nli.appendChild(ndiv);
					ndiv.appendChild(nla)
					nli.appendChild(nspa)
					nli.appendChild(nspb)
					nli.appendChild(img)
					mida.appendChild(nli);
				}
			}
			//li点击播放-开始
			function lidianji() {
				var li1 = document.getElementById("ul1").children;
				for(var i = 0; i < li1.length; i++) {
					(function(ix) {
						li1[ix].onclick = function() {
							if(ix == xh) {

								kaishi()
							} else {
								ol[xh].children[3].src = "img/2017-02-16_132006.png"
								xh = ix;
								a = 0;
								kaishi2();
							}

						}
					})(i)
				}
			}
			window.onload = function() {

				for(var i = 0; i < lia.length; i++) {
					(function(ix) {
						lia[ix].onclick = function() {
							for(var k = 0; k < lia.length; k++) {
								lia[k].className = "";
								diva[k].className = "mid-div1"
							}
							if(ix == 3) {
								diva[2].className = "";
							} else {
								diva[ix].className = "";
							}
							lia[ix].className = "clas1"

						}
					})(i)
				}

				//榜单信息初始化
				var nd = 0;
				var gt = 0;
				var om = 0;
				var hg = 0;
				var midb = document.getElementById("mid2").children[0].children;
				for(var i = 0; i < xx.length; i++) {
					if(xx[i].bd == "nd") {
						midb[0].children[4 + nd].children[0].innerHTML = (nd + 1) + " " + xx[i].title
						midb[0].children[4 + nd].children[1].innerHTML = " " + "-" + " " + xx[i].author
						nd++;
					} else if(xx[i].bd == "gt") {
						midb[1].children[4 + gt].children[0].innerHTML = (gt + 1) + " " + xx[i].title
						midb[1].children[4 + gt].children[1].innerHTML = " " + "-" + " " + xx[i].author
						gt++;
					} else if(xx[i].bd == "om") {
						midb[2].children[4 + om].children[0].innerHTML = (om + 1) + " " + xx[i].title
						midb[2].children[4 + om].children[1].innerHTML = " " + "-" + " " + xx[i].author
						om++;
					} else if(xx[i].bd == "hg") {
						midb[3].children[4 + hg].children[0].innerHTML = (hg + 1) + " " + xx[i].title
						midb[3].children[4 + hg].children[1].innerHTML = " " + "-" + " " + xx[i].author
						hg++;
					}
				}
				tuijian()
					//开始暂停--开始
				var fimg3 = document.getElementById("fimg3")
				fimg3.onclick = function() {
					kaishi()
				}
				lidianji();

			}
		</script>
	</body>

</html>